<template>
  <div class="app-container">
    <!-- 搜索项 -->
    <div class="search_bar">
      <el-form size="small" :inline="true" label-width="120px">
        <el-form-item label="课程名称">
          <el-input
            class="inputstyle"
            v-model="sea_form.courseName"
            placeholder="请输入课程名称"
            clearable
            @keyup.enter.native="getdataBysearch"
          />
        </el-form-item>
        <el-form-item label="分院名称">
          <el-select
            v-model="sea_form.branchId"
            placeholder="请选择"
            clearable
            class="inputstyle"
          >
            <el-option
              v-for="(item, index) in branch"
              :key="index"
              :label="item.branchName"
              :value="item.branchId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学科专业组">
          <el-input
            class="inputstyle"
            v-model="sea_form.disciplineGroupName"
            placeholder="请输入学科专业组"
            clearable
            @keyup.enter.native="getdataBysearch"
          />
        </el-form-item>
        <el-form-item label="课程类型">
          <el-select
            filterable
            v-model="sea_form.courseType"
            placeholder="请选择"
            clearable
            class="inputstyle"
          >
            <el-option
              v-for="(item, index) of dict.type.course_type"
              :disabled="
                (item.value != 3 && courseTemplate == 1) ||
                (item.value == 3 && courseTemplate == 0)
              "
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业名称" label-width="120px">
          <el-cascader
            @change="handleChange"
            :options="options"
            :props="props"
            v-model="majorIds"
            collapse-tags
            :emitPath="false"
            clearable
            class="inputstyle"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="创建教师">
          <el-select
            class="inputstyle"
            placeholder="请选择"
            v-model="sea_form.teacherId"
            filterable
          >
            <el-option
              v-for="(item, index) in commonTeacher"
              :key="index"
              :label="item.name"
              :value="item.teacherId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学期">
          <el-select
            class="inputstyle"
            placeholder="请选择学期"
            v-model="sea_form.semesterId"
            filterable
          >
            <el-option label="全部" :value="''"></el-option>
            <el-option
              v-for="item in schoolSemesterList"
              :key="item.semesterId"
              :label="item.semesterName"
              :value="item.semesterId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="search_btns">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getdataBysearch"
          >搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
          >重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--  导出按钮-->
    <div class="exportbtn">
      <el-radio-group v-removeAriaHidden v-model="courseTemplate">
        <el-radio-button :label="1">工学一体化课程</el-radio-button>
        <el-radio-button :label="0">通用课程</el-radio-button>
      </el-radio-group>
      <el-button type="primary" size="mini" @click="exportExcel"
      >导出Excel
      </el-button
      >
    </div>
    <!-- 问卷列表 -->
    <el-table v-loading="loading" :data="dataList">
      <el-table-column
        show-overflow-tooltip
        label="课程名称"
        align="center"
        prop="courseName"
        width="250"
        fixed="left"
      >
        <template slot-scope="scope">
          {{ scope.row.courseName ? scope.row.courseName : '--' }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="分院"
        align="center"
        prop="branchName"
        width="120"
        fixed="left"
      >
        <template slot-scope="scope">
          {{ scope.row.branchName ? scope.row.branchName : '--' }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="学科专业组"
        align="center"
        prop="disciplineGroupName"
        width="120"
        fixed="left"
      >
        <template slot-scope="scope">
          {{
            scope.row.disciplineGroupName ? scope.row.disciplineGroupName : '--'
          }}
        </template>
      </el-table-column>
      <el-table-column
        width="120"
        label="课程类型"
        align="center"
        prop="courseType"
        fixed="left"
      >
        <template slot-scope="scope">
          {{ scope.row.courseType ? scope.row.courseType : '--' }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="专业大类"
        align="center"
        prop="majorCategory"
      />
      <el-table-column
        label="专业名称"
        align="center"
        prop="courseMajor"
        width="140"
        show-overflow-tooltip
      />
      <el-table-column
        label="创建教师"
        align="center"
        prop="creatorName"
        width="120"
      />
      <el-table-column
        label="当前关联班级"
        align="center"
        prop="className"
        width="160"
        show-overflow-tooltip
      />
      <el-table-column
        label="课程要求"
        align="center"
        prop="jumpStatus"
        width="100"
      />
      <el-table-column
        label="学习要求"
        align="center"
        prop="passAllStatus"
        width="100"
      />
      <el-table-column label="课程封面" align="center" prop="coursePic"/>
      <el-table-column
        label="学习框架图"
        align="center"
        prop="framePic"
        width="100"
      />
      <el-table-column label="主讲教师" align="center" prop="principalName"/>
      <el-table-column
        label="辅助教师"
        align="center"
        prop="teacherNames"
        width="160"
        show-overflow-tooltip
      />
      <el-table-column label="基准学时" align="center" prop="studyTime"/>
      <el-table-column
        label="课程目标"
        align="center"
        prop="teachingObjectives"
      />
      <el-table-column label="课程描述" align="center" prop="describe"/>
      <el-table-column label="学习内容" align="center" prop="content"/>
      <el-table-column
        label="教学组织方式"
        align="center"
        prop="teachingMethod"
        width="100"
      />
      <el-table-column
        label="工具/材料/设备"
        align="center"
        prop="studyTools"
        width="120"
      />
      <el-table-column label="学习资料" align="center" prop="studyData"/>
      <el-table-column
        label="教学场地描述"
        align="center"
        prop="teachingPlace"
        width="100"
      />
      <el-table-column
        label="教学考核要求"
        align="center"
        prop="teachingAssessment"
        width="100"
      />
      <el-table-column
        label="教学场地图片"
        align="center"
        prop="teachingPlacePic"
        width="100"
      />
      <el-table-column label="师资" align="center" prop="teacherResource"/>
      <el-table-column label="说课视频" align="center" prop="courseVideo"/>
      <el-table-column label="更多文档" align="center" prop="moreDoc"/>
      <!-- 通用课程——————start     -->
      <template v-if="courseTemplate == 0">
        <el-table-column
          label="课程标准"
          align="center"
          prop="taskDesign"
          width="200"
        />
        <el-table-column
          label="考核计划"
          align="center"
          prop="assessmentPlan"
          width="200"
        />
        <el-table-column
          label="教学计划"
          align="center"
          prop="teachingProgressPlan"
          width="200"
        />
        <el-table-column
          label="教案"
          align="center"
          prop="teachingActivityPlan"
          width="200"
        />
      </template>
      <!-- 通用课程——————end     -->
      <!-- 工学一体文件——————start     -->
      <template v-if="courseTemplate == 1">
        <el-table-column
          label="人才培养方案"
          align="center"
          prop="talentTrainingProgram"
          width="200"
        />
        <el-table-column
          label="工学一体化课程校本转化建议"
          align="center"
          prop="courseStandardAdvice"
          width="200"
        />
        <el-table-column
          label="课程标准(校本转化)/学习任务设计"
          align="center"
          prop="taskDesign"
          width="260"
        />
        <el-table-column
          label="课程考核方案"
          align="center"
          prop="assessmentPlan"
          width="200"
        />
        <el-table-column
          label="学习任务分析"
          align="center"
          prop="taskAnalysis"
          width="220"
        />
        <el-table-column
          label="学习任务教学活动策划"
          align="center"
          prop="activityPlanningTable"
          width="260"
        />
        <el-table-column
          label="学习任务考核方案"
          align="center"
          prop="taskAssessmentPlan"
          width="220"
        />
        <el-table-column
          label="学习任务工作页"
          align="center"
          prop="workPage"
          width="220"
        />
        <el-table-column
          label="学习任务信息页"
          align="center"
          prop="informationPage"
          width="220"
        />
        <el-table-column
          label="教学进度计划"
          align="center"
          prop="teachingProgressPlan"
          width="220"
        />
        <el-table-column
          label="教学活动方案"
          align="center"
          prop="teachingActivityPlan"
          width="220"
        />
        <el-table-column
          label="工学一体化课程终结性考核试题"
          align="center"
          prop="finalAssessmentTopic"
          width="220"
        />
        <el-table-column
          label="课程专家开发花名册/课程教师团队花名册"
          align="center"
          prop="expertDevelopRoster"
          width="260"
        />
      </template>
      <!-- 工学一体文件——————end     -->
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="sea_form.pageNum"
      :limit.sync="sea_form.pageSize"
      @pagination="getList"
    />
    <exportItem ref="exportitem" @confirmExport="confirmexport"></exportItem>
  </div>
</template>
<script>
import { getSchoolSemesterList } from '@/api/schoolSemester/schoolSemester'
import {
  listPost_branch
} from '@/api/schoolOrganization/organization'
import { allTeacherList } from '@/api/course/course'
import exportItem from './commponent/exportItem'
import { getMajorNameTree } from '@/api/major/major'
import { tranListToTreeData } from '@/utils/util'
import {
  getcourseConstruction
} from '@/api/dataExport/dataexport'
import { formatDate } from '@/utils'

export default {
  components: { exportItem },
  name: 'coursebuild',
  dicts: ['course_type'],
  data() {
    return {
      courseTemplate: 1,
      schoolSemesterList: [],
      loading: false,
      // 总条数
      total: 3,
      // 搜索条件
      sea_form: {
        pageNum: 1,
        pageSize: 50,
        branchId: '',
        courseName: '',
        courseType: '',
        teacherId: '',
        majorIds: '',
        semesterId: '',
        disciplineGroupName: ''
      },
      data: [],
      dataList: [],
      majorIds: [],
      branch: [],
      commonTeacher: [],
      props: { multiple: true },
      options: [
        {
          value: 1,
          label: '东南',
          children: [
            {
              value: 2,
              label: '上海',
              children: [
                { value: 3, label: '普陀' },
                { value: 4, label: '黄埔' },
                { value: 5, label: '徐汇' }
              ]
            },
            {
              value: 7,
              label: '江苏',
              children: [
                { value: 8, label: '南京' },
                { value: 9, label: '苏州' },
                { value: 10, label: '无锡' }
              ]
            },
            {
              value: 12,
              label: '浙江',
              children: [
                { value: 13, label: '杭州' },
                { value: 14, label: '宁波' },
                { value: 15, label: '嘉兴' }
              ]
            }
          ]
        },
        {
          value: 17,
          label: '西北',
          children: [
            {
              value: 18,
              label: '陕西',
              children: [
                { value: 19, label: '西安' },
                { value: 20, label: '延安' }
              ]
            },
            {
              value: 21,
              label: '新疆维吾尔族自治区',
              children: [
                { value: 22, label: '乌鲁木齐' },
                { value: 23, label: '克拉玛依' }
              ]
            }
          ]
        }
      ]
    }
  },
  watch: {
    courseTemplate: {
      handler() {
        this.sea_form.courseType = ''
        this.getList()
      }
    }
  },
  mounted() {
    this.getTeacher()
    this.getBranchList()
    this.getMajorNameTree()
    this.getList()
    this.getSchoolSemester()
  },
  methods: {
    async getSchoolSemester() {
      let res = await getSchoolSemesterList()
      const { code, rows } = res
      if (code == 200) {
        this.schoolSemesterList = rows
      }
    },
    // 搜索
    getdataBysearch() {
      this.sea_form.pageNum = 1
      console.log(this.sea_form, 'this.sea_form')
      // 发送获取信息请求
      this.getList()
    },
    // 重置
    resetSearch() {
      this.sea_form = {
        pageNum: 1,
        pageSize: 10,
        branchId: '',
        courseName: '',
        courseType: '',
        teacherId: '',
        majorIds: '',
        semesterId: '',
        disciplineGroupName: ''
      }
      this.majorIds = []
      this.getdataBysearch()
    },
    // 获取问卷数据
    async getList() {
      this.loading = true
      let params = {
        ...this.sea_form,
        courseTemplate: this.courseTemplate
      }
      let res = await getcourseConstruction(params)
      this.loading = false
      const { code, rows, total } = res
      if (code == 200) {
        this.total = total
        this.dataList = rows
      }

      console.log(res, 'resresesee')
      // 发送获取数据请求
    },
    // 获取分院
    getBranchList() {
      listPost_branch({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId
      }).then((res) => {
        if (res.code == 200) {
          console.log(res.rows, 'skdkdkdd')
          this.branch = res.rows
        }
      })
    },
    /* 获取主讲教师 */
    async getTeacher() {
      let res = await allTeacherList({
        schoolId: this.$store.getters.schoolId,
        pageNum: 1,
        pageSize: 9999
      })
      console.log(res.rows, 'ssssssss')
      this.commonTeacher = res.rows
    },
    exportExcel() {
      this.$refs.exportitem.show()
    },
    async getMajorNameTree() {
      let res = await getMajorNameTree()
      const { code, data } = res
      if (code == 200) {
        let restree = tranListToTreeData(data)
        console.log(restree, 'data')
        this.options = restree.map((item) => {
          const newchildren = item.children.map((child) => ({
            value: child.id,
            label: child.majorName
          }))
          return {
            value: item.majorTypeNum,
            label: item.majorTypeName,
            children: newchildren
          }
        })
      }
    },
    // 导出
    async confirmexport(str) {
      let obj = this.sea_form
      obj.courseTemplate = this.courseTemplate
      obj.params = str

      this.download(
        `/school/system/exportData/courseConstructionExport`,
        obj,
        `课程建设情况表_${formatDate(new Date())}.xlsx`
      )
    },
    handleChange(value) {
      console.log('当前选中的子节点值:', value)
      let arr = value.reduce((acc, val) => {
        val.forEach((item) => {
          if (acc.indexOf(item) === -1) {
            acc.push(item)
          }
        })
        return acc
      }, [])
      let result = arr.filter((item, index) => index !== 0)
      console.log(result, 'arr')
      this.sea_form.majorIds = result.join(',')
      // 这里你可以做其他处理，比如发送请求等
    }
  }
}
</script>
<style scoped lang="scss">
.search_bar {
  padding: 20px 20px 0 20px;
  background-color: #fafafa;
  display: flex;

  .search_btns {
    float: right;
  }
}

.exportbtn {
  display: flex;
  justify-content: space-between;

  margin: 10px 0;
}

.inputstyle {
  width: 240px !important;
}

//::v-deep .el-table::before{
//  height: 10px !important;
//}
//::v-deep .el-table--border::after, .el-table--group::after, .el-table::before{
//  height: 10px !important;
//}
//::v-deep .el-table .el-table--fit .el-table--scrollable-x .el-table--enable-row-hover .el-table--enable-row-transition .el-table--medium{
//  height: 10px;
//}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  -webkit-appearance: none;
  background-color: #fff;
  /* 滚动条背景颜色 */
  height: 8px;
  /* 滚动条高度 */
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #bfbfbf;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #fff;
}
</style>
